<template>

    <div class="history">
        <!-- <div class="dropDown-wrap">
            <van-dropdown-menu>
                <van-dropdown-item teleport="body" :title="dropParams.fieldName ? typeText : '业务类型'" ref="typeRef"
                    v-model="dropParams.fieldName" :options="typeColumn">
                    <div style="padding: 5px 16px;">
                        <van-button type="primary" block round @click="reSetDrop('fieldName')">
                            重置
                        </van-button>
                    </div>
                </van-dropdown-item>
                <van-dropdown-item teleport="body" :title="getdateTitle()" ref="dateRef">
                    <van-date-picker v-model="currentDate" title="选择日期" cancel-button-text="重置" @confirm="dateConfirm"
                        @cancel="dateCancel" :min-date="minDate" :max-date="maxDate" />
                </van-dropdown-item>
            </van-dropdown-menu>
        </div> -->
        <div class="history-table">
            <div class="table-wrap" v-if="tableData.length > 0">
                <!-- <div class="fix-col">
                    <div class="fixed-header">
                        日期
                    </div>
                    <div class="fixed-tr" v-for="(item, index) in timeCol" :key="index">
                        <div class="fixed-td" style="">
                            {{ item }}
                        </div>
                    </div>
                </div> -->
                <div class="content">
                    <div class="table-scroll">
                        <div class="table-header">
                            <div class="th-base" v-for="(h, index) in scrollHeader" :class="`th${index + 1}`"
                                :key="index">{{ h }}
                            </div>
                        </div>
                        <div class="table-body" v-for="(item, index) in tableData">
                            <div class="table-tr" :key="index">
                                <div class="th1 td-base">{{ index + 1 }}</div>
                                <div class="th2 td-base">{{ item.changeContent }}</div>
                                <div class="th3 td-base">{{ item.changePeople }}</div>
                                <div class="th4 td-base">{{ item.changeTime }}</div>
                            </div>
                            <div class="line" v-if="tableData.length != index + 1"
                                style=" height: 1px;background: rgba(239, 239, 239, 1);">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <van-empty v-else :image-size="[120, 120]" description="暂无变更记录" />
            <van-pagination v-if="tableData.length > 0" v-model="params.pageNo" :total-items="total"
                :items-per-page="params.pageSize" @change="changePageSize" />
        </div>
    </div>
</template>

<script setup>
import dayjs from "dayjs"
import { workChange, supervisePage } from "@/service/yearWork"
const route = useRoute()



const timeCol = ref([])
const scrollHeader = ['序号', '督办意见', '操作人', '操作时间']

const tableData = ref([])

const currentDate = ref(null)
currentDate.value = (dayjs().format("YYYY-MM-DD")).split('-')

const minDate = new Date(2023, 0, 1)
const maxDate = new Date(2026, 5, 1)

const dateRef = ref(null)
function dateConfirm({ selectedValues }) {
    dropParams.date = selectedValues
    dateRef.value.toggle()
}
function dateCancel() {
    dropParams.date = ""
    dateRef.value.toggle()
}

function getdateTitle() {
    if (dropParams.date) {
        const date = dropParams.date
        return date.join("-")
    } else {
        return "日期"
    }
}



const dropParams = reactive({
    fieldName: "",
    date: ""
})
const typeColumn = ref([
    { text: '计划进度', value: 'annualPlan' },
    { text: '完成情况', value: 'workProgress' },
    { text: '说明事项', value: 'workStatement' },
    { text: '备注', value: 'workNote' },
    { text: '督办', value: 'superviseComment' },
    { text: '修改状态', value: 'workStatus' },
])
const typeText = computed(() => {
    let target = typeColumn.value.find((item) => {
        return item.value == dropParams.fieldName
    })
    return target.text
})

watch(() => dropParams, (newV) => {
    params.pageNo = 1
    getWorkChange()
},
    {
        deep: true
    }
)



const typeRef = ref(null)
function reSetDrop(key) {
    dropParams[key] = ""
    typeRef.value.toggle()
}

const params = reactive({
    pageNo: 1,
    pageSize: 10
})
const changeMap = {
    "superviseComment": "督办",
    "annualPlan": "计划进度",
    "workProgress": "完成情况",
    "workStatement": "说明事项",
    "workNote": "备注",
    "workStatus": "修改状态"
}
let total = ref(0)

function getWorkChange() {
    let requestParams = {
        ...params,
        isDeleted: 0,
        relatedWorkId: JSON.parse(route.query.rowData).objectId
    }
    tableData.value = []
    timeCol.value = []
    supervisePage(requestParams).then(res => {
        res.data.records.forEach((item, index) => {
            timeCol.value.push(dayjs(item.changeTime).format('YYYY/MM/DD'))
            tableData.value.push({
                id: index + 1,
                changeTime: dayjs(item.createTime).format('YYYY/MM/DD'),
                changeContent: item.superviseContent,
                changePeople: item.superviseUserName,
            })
        })
        total.value = res.data.total
    })
}
function changePageSize() {
    getWorkChange()
}
onMounted(() => {
    getWorkChange()
})


</script>
<style>
.van-dropdown-menu__title:after {
    border-color: transparent transparent rgba(128, 128, 128, 1) rgba(128, 128, 128, 1);
}

/* .el-table__body-wrapper {
    -webkit-overflow-scrolling: touch; 
    overflow-scrolling: touch;
} */
.el-table__header>thead>tr>th .cell {
    color: rgba(166, 166, 166, 1);
    font-size: 26px;
    line-height: 80px;
    border: none;
}

.el-table__body>tbody>tr>td .cell {
    font-size: 26px;
    line-height: 26px;
}
</style>
<style lang="scss" scoped>
// .dropDown-wrap {
//     height: 44px;
// }
::v-deep(.van-dropdown-menu__bar) {
    height: unset;
    background: unset;
    -webkit-box-shadow: unset;
    box-shadow: unset;

}

::v-deep(.van-dropdown-menu__title) {
    font-size: 28px;
    color: rgba(128, 128, 128, 1);
}


.history-table {
    color: rgba(51, 51, 51, 1);
    padding: 20px 26px;
    box-sizing: border-box;
    height: calc(100vh - 92px - 10px - 44px);
    margin-top: 10px;
    border-radius: 30px 30px 0px 0px;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0px -8px 10px 4px rgba(218, 231, 245, 0.5);

}
</style>

<style lang="scss">
.table-wrap {
    overflow-y: auto;
    height: calc(100vh - 92px - 44px - 20px - 84px - 80px);
    // overflow: scroll;
    // width: 100%;
    position: relative;

    // .fix-col {
    //     position: absolute;
    //     right: 0;
    //     width: 150px;
    //     background: #fff;
    //     z-index: 10;
    //     box-shadow: inset 10px 0 10px -10px rgba(0, 0, 0, .15)
    // }

    .content {
        width: 100%;
        // width: calc(100vw - 150px - 52px);
        overflow-x: scroll;
        // height: 600px;
        // background: blue;

        // .table-scroll {
        //     width: 1000px;
        // }
    }
}


.fixed-header {
    width: 100%;
    font-size: 26px;
    line-height: 40px;
    text-align: center;
    color: rgba(166, 166, 166, 1);

}

.fixed-td {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    font-size: 26px;
    height: 112px;
}

.table-header {
    display: flex;
    justify-content: space-between;
}

.th-base {
    flex-shrink: 0;
    text-align: center;
    font-size: 26px;
    line-height: 40px;
    color: rgba(166, 166, 166, 1);
}

.th1 {
    width: 8%;
}

.th2 {
    width: 30%;
}

.th3 {
    width: 20%;
}

.th4 {
    width: 30%;
}

.table-tr {
    display: flex;
    justify-content: space-between;
    // max-height: 80px;
    // padding: 10px 0;
    height: 110px;
}

.td-base {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    color: rgba(51, 51, 51, 1);

}

.td1 {
    width: 8%;
}

.td2 {
    width: 30%;
}

.td3 {
    width: 20%;
    font-size: 26px;
    color: rgba(51, 51, 51, 1);
}

.td4 {
    width: 12%;
}

// .td5 {
//     width: 30%;
//     font-size: 26px;
//     color: rgba(51, 51, 51, 1);
// }

.text-elli {
    flex: 1;
    text-align: center;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    // line-height: 1.6;
    /* 表示显示的行数 */
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
}

// .table-body {
//     display: flex;
//     align-items: center;
// }
// @media (min-width: 750px) {
//     .table-wrap .content .table-scroll {
//         // overflow: scroll;
//         width: calc(100vw - 150px) !important;
//     }

//     // ::-webkit-scrollbar {
//     //     width: 10px;
//     // }
// }
.td-base1 {
 display: flex;
}
.td1,
.td2,
.td4,
.td3,
.td5 {
    display: flex;
    align-items: center;
    // justify-content: center;
}

// .td3,.td5{
//     text-align: center;
//     display: flex;
//     align-items: center;
//     // justify-content: center;
// }
// .td1,.td2,.td4{
//     display: flex;
//     align-items: center;
//     justify-content: center;
// }</style>